import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class SwitchAndCheckBoxDemo extends StatefulWidget {
  @override
  _SwitchAndCheckBoxState createState() => _SwitchAndCheckBoxState();
}

class _SwitchAndCheckBoxState extends State<SwitchAndCheckBoxDemo> {
  bool _switchSelected = false;
  bool _checkboxSelected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('单选开关和复选框示例'),
      ),
      body: Column(
        children: <Widget>[
          Switch(
              //是否选中
              value: _switchSelected,
              //选中时圆圈的颜色
              activeColor: Colors.red,
              //选中时横条的颜色
              activeTrackColor: Colors.red[300],
              //选中时圆圈的图片
              activeThumbImage: AssetImage("images/card03.png"),
              //未选中时圆圈的颜色
              inactiveThumbColor: Colors.black,
              //未选中时横条的颜色
              inactiveTrackColor: Colors.black12,
              //未选中时圆圈的图片
              inactiveThumbImage: AssetImage("images/card02.png"),
              //处理手势拖动启动行为的方式
              dragStartBehavior: DragStartBehavior.start,
              //点击区域尺寸，padded：向四周扩展48px区域;shrinkWrap：控件区域
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              //触发事件
              onChanged: (value) => setState(() => _switchSelected = value)),
          SwitchListTile(
              //是否选中
              value: _switchSelected,
              //选中时圆圈的颜色
              activeColor: Colors.red,
              //选中时横条的颜色
              activeTrackColor: Colors.red[300],
              //选中时圆圈的图片
              activeThumbImage: AssetImage("images/card03.png"),
              //未选中时圆圈的颜色
              inactiveThumbColor: Colors.black,
              //未选中时横条的颜色
              inactiveTrackColor: Colors.black12,
              //未选中时圆圈的图片
              inactiveThumbImage: AssetImage("images/card02.png"),
              //标题
              title: Text('这是标题'),
              //二级标题
              subtitle: Text('这是二级标题'),
              //配置图标或图片
              secondary: Image.asset('images/card03.png', fit: BoxFit.cover),
              //文字是否高亮
              selected: _switchSelected,
              //文字是否对齐 图标高度
              dense: true,
              //文字是否三行显示
              isThreeLine: false,
              //触发事件
              onChanged: (value) => setState(() => _switchSelected = value)),
          Checkbox(
              // tristate: true, 
              // 默认false，但当为true时表示增加中间状态值，onchange的value：true 选中，null中间状态，false 不选中
              value: _checkboxSelected, //是否选中
              activeColor: Colors.blue, //选中时的颜色
              checkColor: Colors.white, //选中时对号的颜色
              //触发事件
              onChanged: (value) => setState(() => _checkboxSelected = value)),
          CheckboxListTile(
              //是否选中
              value: _checkboxSelected,
              //选中的颜色
              activeColor: Colors.blue,
              //标题
              title: Text('这是标题'),
              //二级标题
              subtitle: Text('这是二级标题'),
              //配置图标或图片
              secondary: Image.asset('images/card03.png', fit: BoxFit.cover),
              //文字是否高亮
              selected: _checkboxSelected,
              //将控件放在何处相对于文本,leading 按钮显示在文字前面,platform,trailing 按钮显示在文字后面
              controlAffinity: ListTileControlAffinity.platform,
              //文字是否对齐 图标高度
              dense: true,
              //文字是否三行显示
              isThreeLine: false,
              //触发事件
              onChanged: (value) => setState(() => _checkboxSelected = value)),
        ],
      ),
    );
  }
}
